import 'package:flutter/material.dart';
import 'package:ref/ref.dart';
import 'state.dart';

class TestKeys extends StatelessWidget {
  const TestKeys({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Text('-----测试对Ref对象的属性分解代理-----'),
        Wrap(
          children: [
            MvvmDemo01(),
            MvvmDemo02(),
          ],
        )
      ],
    );
  }
}

// -------------------------------------------------------------------------------------------------------
class MvvmDemo01 extends StatefulWidget {
  const MvvmDemo01({Key? key}) : super(key: key);
  @override
  _MvvmDemo01State createState() => _MvvmDemo01State();
}

class _MvvmDemo01State extends State<MvvmDemo01> {
  int i = 0;
  add() {
    keysInfo.set(() {
      keysInfo.value.add({'title': '水果${i++}', 'price': 12});
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width / 2,
      color: Colors.black.withOpacity(0.1),
      padding: EdgeInsets.all(5),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          RefBuilder(
            () => Column(
              children: [
                Wrap(
                  children: keysInfo.value.map(
                    (ele) {
                      return ele['show'] != false
                          ? Text(ele['title'] + ' ',
                              style: TextStyle(fontSize: 20))
                          : Container();
                    },
                  ).toList(),
                )
              ],
            ),
          ),
          TextButton(onPressed: add, child: Text('发力')),
        ],
      ),
    );
  }
}

// ---------------------------------------------------------------------------------------------------
class MvvmDemo02 extends StatefulWidget {
  const MvvmDemo02({Key? key}) : super(key: key);
  @override
  _MvvmDemo02State createState() => _MvvmDemo02State();
}

class _MvvmDemo02State extends State<MvvmDemo02> {
  @override
  Widget build(BuildContext context) {
    // 定义到这里，新增的元素不会由任何响应。因为build没有刷新
    // var arrList = refKeys<Map<String, dynamic>>(keysInfo);
    return Container(
      width: MediaQuery.of(context).size.width / 2,
      color: Colors.black.withOpacity(0.2),
      padding: EdgeInsets.all(5),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Column(
            children: [
              RefBuilder(() {
                // 定义到这里，新增的元素有响应。因为每次都会生成新的代理对象
                var arrList = refKeys<Map<String, dynamic>>(keysInfo);
                return Wrap(
                  children: arrList.values.map((ele) {
                    return Row(
                      children: [
                        if (ele.value['show'] != false)
                          Text(ele.value['title'],
                              style: TextStyle(fontSize: 20)),
                        TextButton(
                          onPressed: () {
                            ele.ref.set(() {
                              ele.value['show'] =
                                  ele.value['show'] == false ? true : false;
                            });
                          },
                          child: Text(ele.value['show'] != false ? '隐藏' : '显示'),
                        )
                      ],
                    );
                  }).toList(),
                );
              }),
              TextButton(
                onPressed: () {
                  keysInfo.set(() {
                    keysInfo.value.clear();
                  });
                },
                child: Text('清空数组'),
              ),
            ],
          ),
        ],
      ),
    );
  }
}
